import React, {FC} from 'react';
import "./index.less";
import {Button, Input, Space} from "antd";
import HxIcon from "@/components/HxIcon";
import classNames from "classnames";
import {BizSearchType} from "@/pages/HomePage/BizSearchBar";
import {FormattedMessage, useIntl} from "umi";

interface HxSearchProps {
  className?: string;
  searchType: BizSearchType;

  onSubmit?: (val: string, searchType: BizSearchType) => void;

  value?: string;
  onValueChange?: (val: string) => void;

  extras?: React.ReactNode;
}

const HxSearch: FC<HxSearchProps> = (props) => {

  const {searchType, onSubmit, value, onValueChange,extras} = props;

  const intl = useIntl();
  return (
    <div className={classNames("biz-search-container", props.className)}>
      <Space.Compact block>
        <Input size={"large"}
               placeholder={intl.formatMessage({id: `${searchType.key}.placeholder`})}
               value={value}
               allowClear
               onChange={e => {
                 onValueChange?.(e.target.value);
               }}
               onPressEnter={() => {
                 onSubmit?.(value || "", searchType);
               }}
        />
        <Button size={"large"} type="primary"
                onClick={() => {
                  onSubmit?.(value || "", searchType);
                }}>
          <HxIcon type="hxicon-jiansuo"/> <FormattedMessage id="text.search"/>
        </Button>
      </Space.Compact>
      {extras}
    </div>
  );
};

export default HxSearch;
